@import "../../../../style/val.scss";

.my-coupon-list-container {
	background-color: $color6;
	font-size: $fontSize32;
	.banner {
		padding: 0.1rem 0.2rem;
		display: block;
		img {
			width: 100%;
		}
	}

	.content {
		margin-top: 0.24rem;
		margin-bottom: 0.38rem;

		.sub-title-box {
			width: 100%;
			height: 0.8rem;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-left: 0.26rem;
			padding-right: 0.26rem;
			font-size: 0.28rem;
			font-family: PingFangSC-Medium, PingFang SC;
			.sub-text {
				color: rgba(51, 51, 51, 1);
				font-weight: 600;
			}
			.sub-history {
				color: rgb(248, 38, 45);
				font-weight: 600;
			}
			.arrow-img {
				width: 0.24rem;
				height: 0.24rem;
				display: inline-block;
				vertical-align: middle;
				position: relative;
				top: -1px;
			}
		}
		.card-center-un-show {
			display: none;
		}
		.card-center {
			position: relative;
			margin-left: 0.46rem;
			margin-right: 0.46rem;
			.card-tip {
				font-size: $fontSize28;
				color: $color8;
				position: absolute;
				top: 50%;
				left: 41%;
				transform: translate(-30%, -68%);
				-webkit-transform: translate(-30%, -68%);
			}
			.card-img-bg {
				width: 100%;
			}
			.card-img-get {
				position: absolute;
				right: 0rem;
				width: 1.3rem;
				top: 50%;
				transform: translate(-30%, -68%);
				-webkit-transform: translate(-30%, -68%);
			}
		}
		.am-tabs-default-bar-content {
			margin-left: 8%;
			margin-right: 8%;
		}
		.am-list-view-scrollview {
			width: 100%;
		}
		.list_item {
			margin-left: 0.26rem;
			margin-right: 0.26rem;
			margin-bottom: 0.24rem;
			background: $color8;
		}
		.card-list {
			margin-top: 0.06rem;
			.no-data-top {
				background-color: $color6;
			}
		}
		.list-view-section-body {
			background-color: $color6;
		}
		.am-list-body::before {
			height: 0rem !important;
		}
		.am-list-body::after {
			height: 0rem !important;
		}

		.card_value {
			width: 30%;
			padding-top: 0.2rem;
			display: inline-block;
			color: $color-main-green;
			background: $color8;
			.card_span {
				font-size: $fontSize48;
				font-weight: 400;
				margin-left: 0.2rem;
				.card-unit {
					font-size: $fontSize28;
				}
			}
			.card_span_limit {
				font-size: $fontSize28;
				margin-left: 0.2rem;
			}
		}

		.card_detail {
			position: relative;
			display: inline-block;
			// padding-top: 0.2rem;
			width: 70%;
			background: $color8;
			vertical-align: top;
			.to_used {
				position: absolute;
				font-size: $fontSize30;
				width: 1.2rem;
				height: 0.46rem;
				line-height: 0.46rem;
				text-align: center;
				border-radius: 0.4rem;
				color: rgb(248, 38, 45);
				border: 1px rgb(248, 38, 45) solid;
				right: 0rem;
				top: 60%;
				transform: translate(-30%, -100%);
				-webkit-transform: translate(-30%, -100%);
				margin-top: 0.1rem;
				z-index: 10;
			}
			.card_term {
				font-size: 0.24rem;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: rgba(151, 151, 151, 1);
				text-align: left;
			}
			.text-red{
				color: #F82633 !important;
			}
			.card_title {
				color: $color23;
				font-size: $fontSize30;
				font-weight: bold;
				margin: 0.2rem 0.2rem 0rem 0rem;
				padding: 0.12rem 0rem;
				text-align: left;
				.couponName {
					font-weight: bold;
					margin-bottom: 0.1rem;
				}
			}
			.couponAmount {
				font-size: 0.6rem;
				font-weight: 400;
				color: rgba(216, 67, 59, 1);
				margin-left: 0.1rem;
				margin-right: 0.1rem;
			}
			.card_data {
				color: $color22;
				font-size: $fontSize24;
				position: relative;
				text-align: left;
				margin-top: 0.3rem;
				.status-des {
					position: absolute;
					font-size: $fontSize30;
					border: 1px solid $color22;
					width: 1.2rem;
					height: 0.46rem;
					line-height: 0.46rem;
					text-align: center;
					border-radius: 0.4rem;
					color: $color22;
					right: 0rem;
					top: 20%;
					transform: translate(-30%, -100%);
					-webkit-transform: translate(-30%, -100%);
					margin-top: 0.1rem;
				}
				.get_card_status {
					border: 1px solid $color-main-green;
					color: $color-main-green;
				}
				.card-use {
					width: 1.42rem;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 0.28rem;
					background: linear-gradient(90deg, #40b15c 0%, #40b15d 100%);
					color: $color8;
					border-color: $color-main-green;
				}
				
			}
			.new-person-desc{
				font-size: 0.24rem;
				color: #F82633;
			}
		}
		.explain-detail-un-show {
			display: none;
		}
		.card-explain {
			width: 100%;
			font-size: $fontSize26;
			background: $color8;
			.card-title {
				margin: 0.2rem 0.2rem 0rem;
				padding: 0.12rem 0rem;
				border-top: 1px solid $color5;
				position: relative;
			}
			.card-explain-tip {
				color: $color22;
			}
			.icon-open {
				position: absolute;
				right: 0.4rem;
				width: 0.48rem;
				height: 0.18rem;
				background: url("../../../../images/icon-detail-arrow.png");
				background-size: 100%;
			}
			.explain-detail {
				padding: 0.2rem;
			}
		}
	}
	.left-top-tips {
		width: 1.3rem;
		height: 0.38rem;
		background: linear-gradient(
			90deg,
			rgba(255, 116, 116, 1) 0%,
			rgba(255, 43, 43, 1) 100%
		);
		border-radius: 0.08rem 0px 0.16rem 0px;
		font-size: 0.22rem;
		line-height: 0.38rem;
		text-align: center;
		color: #ffffff;
	}
	.left-top-tips-disable {
		width: 1.3rem;
		height: 0.38rem;
		//background:linear-gradient(137deg,rgba(250,217,97,1) 0%,rgba(247,107,28,1) 100%);
		border-radius: 0.08rem 0px 0.16rem 0px;
		font-size: 0.22rem;
		line-height: 0.38rem;
		text-align: center;
		color: #ffffff;
	}
	.left-image {
		margin-left: 0.3rem;
		width: 1.4rem;
		height: 1.4rem;
		background-color: #eeeeee;
	}
}
